import { type FC } from 'react';
import { View, Image, TouchableOpacity, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import type { PageHeaderProps } from './types';
import icon1 from '@/assets/images/arrow-left.png';
import icon2 from '@/assets/images/arrow-left-white.png';
import styles from './styles';

const PageHeader: FC<PageHeaderProps> = (props) => {
  const { mode = 'white', headerContent } = props;
  const { top } = useSafeAreaInsets();
  const blackMode = mode === 'black';
  const backIocn = blackMode ? icon1 : icon2;

  const renderBackButton = () => {
    const btnStyles = [
      styles.backStyle,
      styles.backButton
    ];
    return (
      <TouchableOpacity
        style={btnStyles}
        onPressOut={props.onBack}
      >
        <Image source={backIocn} />
      </TouchableOpacity>
    );
  }

  const renderContent = () => {
    return headerContent || (
      <Text
        numberOfLines={1}
        style={styles[`text_${mode}`]}
      >
        {props.title}
      </Text>
    );
  }

  return (
    <View style={{ ...styles.header, top }}>
      {renderBackButton()}
      <View style={styles.header_content}>
        {renderContent()}
      </View>
      <View style={styles.extra}>
        {props.extra}
      </View>
    </View>
  );
}

export default PageHeader;
